<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="author" content="" />
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<title> 呵呵 </title>
		<style>
			ul {
				position: fixed;
				right: 2px;
				bottom: 2px;
				width: 40px;
				height: 40px;
				line-height: 40px;
				list-style-type: none;
				marign: 0;
				padding: 0;
				text-align: center;
				color: #FFF;
				cursor: pointer;
			}
			ul > li, ul:after {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background-color: blue;
			}
			ul > li {
				transition: all .5s;
			}
			ul:after {
				content: attr(data-close);
				z-index: 1;
				backgound-color: gray;
				border-radius: 50%;
			}
			ul.active:after {
				content: attr(data-open);
			}

		</style>
	</head>
	<body>
		<ul data-open="收起" data-close="展开">
			<li>
				11
			</li>
			<li>
				22
			</li>
			<li>
				33
			</li>
			<li>
				44
			</li>
			<li>
				55
			</li>
			<li>
				66
			</li>
			<li>
				77
			</li>
			<li>
				88
			</li>
		</ul>
		<script>
			var ul = document.querySelector("ul"), //
			lis = ul.querySelectorAll("li"), //
			i = lis.length, //
			n = i - 1, //
			r = 200, //
			transform = function(x) {
				this.style.transform = this.style.webkitTransform = this.style.mozTransform = this.style.oTransform = this.style.msTransform = x;
			};
			while (i--) {
				lis[i].data_transform = "translate(" + (-r * Math.cos(90 / n * i * (Math.PI / 180))) + "px," + (-r * Math.sin(90 / n * i * (Math.PI / 180))) + "px)";
				lis[i].style.transitionDelay = lis[i].style.webkitTransitionDelay = lis[i].style.mozTransitionDelay = lis[i].style.msTransitionDelay = lis[i].style.oTransitionDelay = (i * 50) + "ms";
			}
			ul.addEventListener("click", function() {
				this.classList.toggle("active");
				var i = lis.length;
				if (this.classList.contains("active"))
					while (i--) {
						transform.call(lis[i], lis[i].data_transform)
					}
				else
					while (i--) {
						transform.call(lis[i], "")
					}
			}, false);
		</script>
	</body>
</html>